<!--博客-->
<template>
  <div id="blogDetail">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu></LeftMenu>
    </div>
    <div ref='blogDetail' class='blogDetail'>
      <!--   onclick="location.reload();"   -->
      <h3 @click="detail" title='点击刷新' class="logTitle">{{ log.title }}</h3>
      <p style="font-size: 15px;color: silver;">
        作者:&nbsp;{{ log.author }}&ensp;时间:&nbsp;{{ log.createTime }}&ensp;字数:&nbsp;{{ log.wordage }}&nbsp;
        星数:&nbsp;{{ log.starNum }}&ensp;分类:&nbsp;{{ log.type }}&ensp;</p>
      <div class="content">
        <el-backtop target=".content" :visibility-height="900" class="backTop" title="返回顶部"></el-backtop>
        <div class="contentTag">[概要]</div>
        <div v-html="log.blurb" class="htmlText"></div>
        <div class="contentTag">[内容]</div>
        <div v-html="log.content" class="htmlText"></div>
        <div v-if="log.extend" class="contentTag">[拓展信息]
        </div>
        <div v-html="log.extend" class="htmlText"></div>
        <div v-if="log.remark" class="contentTag">[备注]
        </div>
        <div v-html="log.remark" class="htmlText"></div>
        <hr style="margin-top: 50px;width: 95%;margin-left: 0">
        <!--标注：来源、星星、-->
        <p style="color: aliceblue;">
          <el-tooltip content="点亮星星>^<" placement="top-start" effect="light">
            <i class="el-icon-star-on starLit" title="" @click="starLit(log.id,1)">
              {{ log.starNum }}&ensp;<i class="el-icon-magic-stick"></i></i>
          </el-tooltip>&emsp;
          <!--操作返回提示-->
          <span class="ctlReturnMsg" v-show="ctlReturnMsg">
                    <i class="el-icon-success ctlReturnMsg"></i>{{ ctlReturnMsg }}</span>
          <span style="font-size:13px ">参考来源：<span v-html="log.from ? log.from : '--'"> </span></span>&emsp;
        </p>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../../components/head/LeftMenu'
import TopNav from '../../../components/head/TopNav'
import Footer from '../../../components/foot/Footer'
import Constant from "../../../assets/constant/Constant";
import blog from '../../../apis/blog'
import '../../../assets/css/CodeWeb.css';

export default {
  name: 'blogDetail',
  components: {LeftMenu, TopNav, Footer},

  data() {
    return {
      log: {},
      ctlReturnMsg: '',
    }
  },
  created() {
    this.detail();
  },
  methods: {
    detail() {
      let id = this.$route.query.id;
      if (id === undefined || id === null) {
        id = this.$route.params.id;
        if (id === undefined || id === null) {
          id = localStorage.getItem(Constant.PERSONAL_LOG_DETAIL_VUE_PARAMS_ID)
        } else {
          localStorage.setItem(Constant.PERSONAL_LOG_DETAIL_VUE_PARAMS_ID, id)
        }
      }
      //console.log(id);
      blog.detail({id: id}).then((res) => {
        console.log(res);
        if (res.status === 200 && res.data.data) {
          this.log = res.data.data;
        } else {
          console.log(res);
        }
      })
    },
    //点亮星星>^<
    starLit(id, num) {
      let data = {};
      data.id = id
      data.starNum = num
      blog.editMark(data)
        .then((res) => {
          console.log(res);
          this.loading = false;
          if (res.status === 200 && res.data.finish) {
            this.ctlReturnId = id;
            this.ctlReturnMsg = '星星+1';
            setTimeout(() => {
              this.ctlReturnId = '';
              this.ctlReturnMsg = '';
            }, 1000);
            this.detail();
          } else {
            this.ctlReturnId = '';
            this.ctlReturnMsg = '';
            this.$notify.info({
              message: ">_< 星星点亮失败，请稍后再试...",
              position: 'bottom-right',
              showClose: false,
            })
            console.log(res);
          }
        })
    },
  },
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style>
#blogDetail {
  background: url("src/assets/image/blueHill.jpg"); /*seaWorld*/
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
}

.LeftMenu {
}

.TopNav {
}

.blogDetail {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  text-align: center;
}

.blogDetail a {
  color: deepskyblue;
  text-decoration: none;
}

.logTitle {
  width: 60%;
  margin-left: 20%;
  color: cyan;
}

.logTitle:hover {
  color: LimeGreen;
  cursor: pointer;
}

.backTop {
  border-radius: 1%;
  width: 39px;
  background: skyblue;
}

.backTop:hover {
  background: lightcyan;
}

.content {
  width: 80%;
  height: 70%;
  overflow: auto;
  margin-top: 10px;
  margin-left: 19.5%;
  margin-right: 10%;
  padding-bottom: 5%;
  background: transparent;
  color: white;
  font-size: 16px;
  text-align: left;

}

.content::-webkit-scrollbar {
  width: 8px;
}

.contentTag {
  color: cyan;
  font-size: 15px;
  padding-top: 20px;
  padding-bottom: 2px;
  border-bottom: thin dotted snow;
  width: 95%;
}

.htmlText {
  padding-right: 4%;
}

.starLit {
  color: cyan;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.starLit:hover {
  color: lightgreen;
  font-size: 16px;
  cursor: pointer;
}

.ctlReturnMsg {
  background: snow;
  color: lightseagreen;
  font-size: 15px;
  text-align: center;
}

</style>
